<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import request from '@/utils/request';
import china from '../assets/中华人民共和国.json'

onMounted(async () => {
    let response = await request.get("/detail/all")
    // map
    let list1 = response.reduce((acc, { province }) => {
        if (!acc[province]) {
            acc[province] = { province, cnt: 0 }
        }
        acc[province].cnt += 1;
        return acc;
    }, {})
    let data1 = Object.values(list1).map(({ province, cnt }) => ({ name: province, value: cnt }));
    // console.log(data);
    echarts.registerMap('中国', china);
    let myEchart1 = echarts.init(document.getElementById("map_dom"));
    myEchart1.setOption({
        title: {
            text: '专业各省份招生人数统计 ',
            x: 'center',
        },
        dataRange: {
            min: 0,
            max: 100,
            // text:['高','低'],
            realtime: true,
            calculable: true,
            color: ['orangered', 'yellow', 'green']
        },
        series: [
            {
                name: '招生人数',
                type: 'map',
                map: '中国',
                itemSytle: {
                    emphasis: { label: { show: false } }
                },
                data: data1,
                layoutCenter: ['30%', '30%'],
            }
        ]
    });

    //pie
    let list2 = response.reduce((acc, { nation }) => {
        if (!acc[nation]) {
            acc[nation] = { nation, cnt: 0 }
        }
        acc[nation].cnt += 1;
        return acc;
    }, {})
    let data2 = Object.values(list2).map(({ nation, cnt }) => ({ name: nation, value: cnt }));
    let pieChart = echarts.init(document.getElementById('pie_dom'));
    pieChart.setOption({
        title: {
            text: '民族',
            left: 'center',
            top: 20
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: '10%',
            top: '18%'
        },
        series: [
            {
                type: 'pie',
                name:  "民族",
                radius: '60%',
                data: data2,
                center: ['70%', '55%'],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
            }
        ]
    })

    let current_year = new Date().getFullYear();

    //bar   星座
    let obj3 = response
        // .filter(x => (current_year - x.year) <= 3)
        .reduce((acc, { constellation }) => {
            if (!acc[constellation]) {
                acc[constellation] = { constellation, cnt: 0 }
            }
            acc[constellation].cnt += 1
            return acc;
        }, {});
    let list3 = Object.values(obj3).sort((a, b) => b.cnt - a.cnt);
    // console.log(list3);
    let constellation = list3.map(x => x.constellation);
    let con_cnt = list3.map(x => x.cnt);
    let bar_echart = echarts.init(document.getElementById('bar_dom'));
    bar_echart.setOption({
        title: {
            text: '星座分布',
            left: 'center',
            top: 15
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        emphasis: {
            itemStyle: {
                borderRadius: 20,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#2378f7" },
                    { offset: 0.7, color: "#2378f7" },
                    { offset: 1, color: "#83bff6" },
                ]),
            },
        },
        xAxis: {
            type: 'category',
            data: constellation,
            name: '星座',
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#595C61'
                },
                formatter: function (value) {
                    return value.split("").join("\n");
                }
            }
        },
        yAxis: [{ type: 'value' }],
        series: [
            {
                name: '人数',
                data: con_cnt,
                type: 'bar',
                label: { show: true },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#83bff6" },
                        { offset: 0.5, color: "#188df0" },
                        { offset: 1, color: "#188df0" },
                    ]),
                },
            }
        ]
    });


    let obj4 = response
        .filter(x => (current_year - x.year) <= 3)
        .reduce((acc, { province }) => {
            if (!acc[province]) {
                acc[province] = { province, cnt: 0 }
            }
            acc[province].cnt += 1;
            return acc;
        }, {})
    let list4 = Object.values(obj4).sort((a, b) => b.cnt - a.cnt).slice(0, 5);
    // console.log(list4);
    let td_echart = echarts.init(document.getElementById('td_bar'));
    td_echart.setOption({
        title: {
            text: '近三年专业招生人数Top5省份',
            textStyle: {
                align: 'center',
                fontSize: 20,
            },
            top: '3%',
            left: '10%',
        },
        grid: {
            top: "25%",
            bottom: "10%"//也可设置left和right设置距离来控制图表的大小
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
                label: {
                    show: true
                }
            }
        },
        xAxis: {
            data: list4.map(x => x.province),
            axisLine: {
                show: true, //隐藏X轴轴线
                // lineStyle: {
                //     color: '#00FFFF'
                // }
            },
            axisTick: {
                show: true //隐藏X轴刻度
            },
            axisLabel: {
                show: true,
            },
            name: "省份"
        },
        yAxis: [{
            type: "value",
            name: "人数",
            splitLine: {
                show: false
            },
            axisTick: {
                show: true
            },
        },
        {
            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitArea: {
                show: true,
                areaStyle: {
                    color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                }
            }
        }
        ],
        series: [
            {
                name: "人数",
                type: "bar",
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: "#00FFE3"
                        },
                        {
                            offset: 1,
                            color: "#4693EC"
                        }
                        ])
                    }
                },
                data: list4.map(x => x.cnt)
            }
        ]
    });

})
</script>

<template>
    <el-row>
        <el-col :span="12">
            <div class="grid-content ep-bg-purple" id="map_dom"
                style="padding: 30px; box-shadow: 0px 0 4px rgba(154, 158, 163, 0.35);" />
        </el-col>
        <el-col :span="12">
            <div class="grid-content ep-bg-purple-light" id="pie_dom"
                style="  box-shadow: 0 0px 4px rgba(154, 158, 163, 0.35); " />
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
            <div class="grid-content ep-bg-purple" id="bar_dom" style="box-shadow: 0 0 4px rgba(154, 158, 163, 0.35);" />
        </el-col>
        <el-col :span="12">
            <div class="grid-content ep-bg-purple-light" id="td_bar"
                style="box-shadow: 0 1px 1px rgba(154, 158, 163, 0.35);  " />
        </el-col>
    </el-row>
</template>

<style lang='scss' scoped>
.el-row {
    height: 48%;
    box-sizing: border-box;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    height: 100%;
    width: 99%;
    box-sizing: border-box;
}
</style>